{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            width: 100%;
            height: 500px;
        }

        p {
            margin-left: 5px;
            font-size: 14px;
        }
    </style>

    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=dcCd3C5aLBLROzhFEj1bigWVnreynV9l"></script>
    <script src="{% static 'js/jquery.js' %}"></script>
    <title>给多个点添加信息窗口</title>
    <script type="text/javascript"
            src="{% static 'js/TextIconOverlay_min.js' %}"></script>
    <script type="text/javascript"
            src="{% static 'js/MarkerClusterer_min.js' %}"></script>
</head>
<body>
<input type="text" id="search">
<button id="huoqu">获取数据</button>
<div id="allmap"></div>

</body>
</html>
<script type="text/javascript">

    // 百度地图API功能
    map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.417854, 39.921988), 15);

    var data_info = [];
    $('#huoqu').click(function () {
        $.ajax({
            url: "{% url 'data' %}",
            data:{"search":$("#search").val()},
            success: function (res) {
                data_info = res['data'];
                for (var i = 0; i < data_info.length; i++) {
                    var marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]));  // 创建标注
                    var content = data_info[i][2];
                    map.addOverlay(marker);               // 将标注添加到地图中
                    addClickHandler(content, marker);
                }
            }
        })
    });

    var opts = {
        width: 250,     // 信息窗口宽度
        height: 80,     // 信息窗口高度
        title: "信息窗口", // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };
    for (var i = 0; i < data_info.length; i++) {
        var marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]));  // 创建标注
        var content = data_info[i][2];
        map.addOverlay(marker);               // 将标注添加到地图中
        addClickHandler(content, marker);
    }

    function addClickHandler(content, marker) {
        marker.addEventListener("click", function (e) {
                openInfo(content, e)
            }
        );
    }

    function openInfo(content, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    }

</script>
